<template>
	<div class="content">
		<scroll-view class="scroll-view_H tab" scroll-x="true" @scroll="scroll" scroll-left="120">
			<span class="label" v-for="(item,idx) in cateList" :key="idx" :class="{current:tabIndex == idx}" @click="changeTab(idx)">{{ item.name }}</span>
		</scroll-view>
		<div class="bg-wrap">
			<div class="wrap" >
				<div class="tab-check" v-if="subCateList.length">
					<span class="tab" :class="{'tab-current':subCateIdx == key}" v-for="(obj,key) in subCateList" :key="key" @click="changeSubCate(key,obj)">{{ obj.name }}</span>
					<!-- <span class="tab">颜值</span>
					<span class="tab">娱乐</span> -->
				</div>
			</div>
			<div class="anchor">
				<div class="list" v-for="(item,idx) in anchorListData" :key="idx">
					<!-- <div class="top">
						<span class="live">live</span>
						<span class="share">51.49w</span>
					</div> -->
					<img class="pic" :src="item.img" alt="">
					<!-- <div class="bottom">
						<img class="avatar" src="../../static/logo.png" alt="">
						<div class="nickname">
							<div>小南</div>
							<div class="tags">
								<span class="label">颜值</span>
								<span class="label">才艺</span>
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'

	export default {
		components:{
		},
		data() {
			return {
				tabIndex:0,
				cateList:[],
				subCateList:[],
				subCateIdx:0,
				cate_id:undefined,
				anchorListData:[]
			}
		},
		async onLoad() {
			await this.getAnchor()
			await this.getAnchorlist()

		},
		methods: {
			//获取主播列表
			async getAnchorlist(){
				const resData = await request('api/anchor/anchorlist', 'post', {cate_id:this.cate_id});
				this.anchorListData = resData.data
			},
			async getAnchor(){
				const resData = await request('api/anchor/cateList', 'post', {});
				console.log("🚀 ~ getBanner ~ resData:", resData)
				this.cateList = resData.data

				const child_cate = this.cateList[this.tabIndex].child_cate
				this.cate_id = child_cate.length && child_cate[this.subCateIdx].id
			},
			changeSubCate(idx,obj){
				this.subCateIdx = idx
				this.cate_id = obj.id

				this.getAnchorlist()
			},
			changeTab(idx){
				this.tabIndex = idx
				this.subCateList = this.cateList[idx].child_cate

				this.cate_id = this.subCateList[0].id

				this.getAnchorlist()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 18px 0;
		
		.wrap {
			border-radius: 28px 28px 0px 0px;
			margin-top: 20px;
			padding: 18px 15px;
			.tab-check {
				display: flex;
				.tab-current {
					background: #FFADA9;
				}
				.tab {
					width: 61px;
					height: 28px;
					border-radius: 100px 100px 100px 100px;
					border: 2px solid #000000;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 12px;
				}
			}
		}
		.tab {
			display: flex;
			.label {
				margin: 0 15px;
				color: #8C8C8C;
			}
			.current {
				color: #000000;
				position: relative;
				&:after {
					content: '';
					position: absolute;
					bottom:0;
					left: 0;
					width: 100%;
					height: 8px;
					background: linear-gradient( 270deg, rgba(255,54,54,0.6) 0%, rgba(255,103,70,0.6) 100%);
				}
			}
		}
	}
	.bg-wrap {
		background: url('/static/zhubobg.png') center top no-repeat;
		background-size: contain;
		margin-top: 20px;
		min-height: 100vh;
	}
	.anchor {
		display: flex;
		flex-wrap: wrap;
		gap: 3px;
		padding: 0 15px;

		.list {
			position: relative;
			width: 167px;
			height: calc(167px + 54px);
			border: #000000 2px solid;
			border-radius: 15px;
			display: flex;
			overflow: hidden;
			.pic {
				width: 167px;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			.top {
				display: flex;
				position: absolute;
				top: 10px;
				z-index: 9;
				left: 10px;
				.live {
					width: 30px;
					height: 20px;
					background: linear-gradient( 270deg, rgba(255,54,54,0.9) 0%, rgba(255,135,108,0.9) 100%);
					border-radius: 4px 4px 4px 4px;
					border: 1px solid #000000;
					border-radius: 4px;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 9px;
				}
				.share {
					width: 60px;
					height: 20px;
					background: rgba(0,0,0,0.3);
					border-radius: 10px;
					font-size: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					margin-left: 6px;
				}
			}
			.bottom {
				display: flex;
				position: absolute;
				bottom: 6px;
				left: 10px;
				align-items: center;
				.avatar {
					width:34px;
					height: 34px;
					border-radius: 50%;
				}
				.nickname {
					margin: 0 0 0 7px;
					color: #212121;
				}
				.tags {
					.label {
						width: 29px;
						height: 14px;
						background: linear-gradient( 270deg, #FF3A3A 0%, #FF8F27 100%);
						border-radius: 6px;
						border: 1px solid #000000;
						color: #fff;
						padding: 0 10px;
						margin-right: 3px;
						font-size: 10px;
					}
				}
			}
		}
	}

</style>
